<template>
  <view class="container">
    <!-- 页面头部 -->
    <view class="header">
      <view class="header-left" @click="goBack">
        <text class="back-btn">←</text>
      </view>
      <view class="header-center">
        <text class="header-title">关于应用</text>
      </view>
      <view class="header-right"></view>
    </view>
    
    <!-- 应用信息区域 -->
    <view class="about-content">
      <!-- 应用Logo -->
      <view class="app-logo">
        <image src="/static/logo.png" mode="aspectFit"></image>
      </view>
      
      <!-- 应用名称 -->
      <view class="app-name">城市探索</view>
      
      <!-- 版本号 -->
      <view class="app-version">版本 1.0.0</view>
      
      <!-- 应用描述 -->
      <view class="app-description">
        城市探索是一款专为城市游客打造的移动应用，
        提供美食推荐、景点浏览等一站式城市旅行服务，
        让您的旅行更加便捷和丰富多彩。
      </view>
      
      <!-- 功能特点 -->
      <view class="features-section">
        <view class="section-title">功能特点</view>
        <view class="feature-item">
          <view class="feature-icon">🍽️</view>
          <view class="feature-text">精选当地美食推荐</view>
        </view>
        <view class="feature-item">
          <view class="feature-icon">🏙️</view>
          <view class="feature-text">热门景点详细介绍</view>
        </view>
        <view class="feature-item">
          <view class="feature-icon">❤️</view>
          <view class="feature-text">收藏喜爱的地点</view>
        </view>
        <view class="feature-item">
          <view class="feature-icon">📱</view>
          <view class="feature-text">个性化用户中心</view>
        </view>
      </view>
      
      <!-- 其他信息 -->
      <view class="info-section">
        <view class="info-item" @click="viewPrivacy">
          <view class="info-text">隐私政策</view>
          <view class="menu-arrow"></view>
        </view>
        <view class="info-item" @click="viewTerms">
          <view class="info-text">用户协议</view>
          <view class="menu-arrow"></view>
        </view>
        <view class="info-item" @click="contactUs">
          <view class="info-text">联系我们</view>
          <view class="menu-arrow"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    goBack() {
      uni.navigateBack();
    },
    viewPrivacy() {
      uni.showToast({
        title: '隐私政策页面开发中',
        icon: 'none'
      });
    },
    viewTerms() {
      uni.showToast({
        title: '用户协议页面开发中',
        icon: 'none'
      });
    },
    contactUs() {
      uni.showModal({
        title: '联系我们',
        content: '客服邮箱: support@cityexplore.com\n客服电话: 400-123-4567',
        showCancel: false
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 0;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 头部样式 */
.header {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-left,
.header-right {
  width: 60rpx;
  text-align: center;
}

.header-center {
  flex: 1;
  text-align: center;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.back-btn {
  font-size: 48rpx;
  color: #333;
}

/* 内容样式 */
.about-content {
  padding: 50rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 应用Logo */
.app-logo {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  border-radius: 30rpx;
  overflow: hidden;
  background-color: white;
  padding: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.app-logo image {
  width: 100%;
  height: 100%;
}

/* 应用名称和版本 */
.app-name {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.app-version {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}

/* 应用描述 */
.app-description {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 60rpx;
  padding: 0 40rpx;
}

/* 功能特点 */
.features-section {
  width: 100%;
  background-color: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.feature-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
}

.feature-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
  width: 48rpx;
  text-align: center;
}

.feature-text {
  font-size: 28rpx;
  color: #666;
}

/* 其他信息 */
.info-section {
  width: 100%;
  background-color: white;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-text {
  font-size: 32rpx;
  color: #333;
}

.menu-arrow {
  width: 0;
  height: 0;
  border-left: 12rpx solid #999;
  border-top: 12rpx solid transparent;
  border-bottom: 12rpx solid transparent;
}
</style>